<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 道路信息 -->
<script type="text/javascript">
	$(function() {
		mySubmit("roadInfoForm", intiRoadInfoFormData, roadInfoSuccess);
		getWayInfoMsg();
	});
	//获取编辑页面数据
	var isEdit="no";
	function getWayInfoMsg() {
		var fkProjectid = parent.parent.parent.projectID; //建筑id
		var url = "assortInfo/getWayInfoByBuild";
		$.getJSON(url, {
			fkProjectId : fkProjectid
		}, function(data, status) {
			if (data != null && data.length>0) {
				var roadInfo = new Array();
				isEdit="yes";
				for(var i=0;i<data.length;i++){
					//div模板添加
					addDivWay(data[i].texture);
					roadInfo.push(data[i]);
				}
				$t=$("#div_way table");
				for(var i=0;i<$t.length;i++){
					v=$t[i];
					$(v).find("input[name='wayName']").val(roadInfo[i].wayName);
					$(v).find("input[name='width']").val(returnFloat(roadInfo[i].width));
					$(v).find("input[name='heigth']").val(returnFloat(roadInfo[i].heigth));
					$(v).find("input[name='separateDevice']").val(roadInfo[i].separateDevice);
					$(v).find("input[name='length']").val(returnFloat(roadInfo[i].length));
					$(v).find("input[name='roadid']").val(roadInfo[i].id);
					$(v).find("select[name='purpose']").val(roadInfo[i].wayUse).trigger("change");
				}
				$("#roadInfoForm").find("#btn_div2").show();
				$("#roadInfoForm").find("#btn_div1,.icon-fullscreen").hide();
				$("#roadInfoForm").find("input,textarea").attr("readonly", true);
				$("#roadInfoForm").find("select,.addbtn").attr("disabled", "disabled");
			} else {
				$("#roadInfoForm").find("#btn_div2").hide();
				$("#roadInfoForm").find("#btn_div1,.icon-fullscreen").show();
				$("#roadInfoForm").find("select,.addbtn").removeAttr("disabled");
			}
		});
	}
	var optWayInfo;
	//optWayInfo操作字段，0：临时保存；1：新增；2：修改
	function saveWayInfo(val) {
		optWayInfo = val;
		if (val == 3) {
			//解除锁定状态
			var index = layer.confirm('确定开启编辑状态？', {
				offset : '20%',
				shade : 0
			}, function() {
				//去除只读开启按钮编辑
				$("#roadInfoForm").find("input,textarea").attr("readonly", false);
				$("#roadInfoForm").find("select,.addbtn").removeAttr("disabled");
				$("#roadInfoForm .icon-fullscreen").show();
				$("#roadInfoForm").find("#modifyBtn").hide();
				// $(".hidbtn").removeClass("hidbtn");
				$("#roadInfoForm").find(".hidbtn").addClass("showbtn");
				layer.close(index);
			});
		} else {

			$("#roadInfoForm").submit();
		}
	}
	var x; //load弹窗index
	function intiRoadInfoFormData() {
		x = layer.load(2);
		var $table = $("#div_way table");
		var fkProjectid = parent.parent.parent.projectID; //建筑id
		var arrWay = new Array();
		for (var i = 0; i < $table.length; i++) {
			var v = $table[i];
			var id = $(v).find("input[name='roadid']").val();
			var wayName = $(v).find("input[name='wayName']").val();
			var texture = $(v).find("select[name^='material_']").val();
			var wayUse = $(v).find("select[name='purpose']").val();
			var width = $(v).find("input[name='width']").val();
			var heigth = $(v).find("input[name='heigth']").val();
			var length = $(v).find("input[name='length']").val();
			var separateDevice = $(v).find("input[name='separateDevice']").val();
			if (!testNum(heigth)) {
				layer.msg("高度请输入数值");
				$(v).find("input[name='heigth']").focus();
				layer.close(x);
				return null;
			}else if (!testNum(length)) {
				layer.msg("长度请输入数值");
				$(v).find("input[name='length']").focus();
				layer.close(x);
				return null;
			}else if(!testNum(width)){
				layer.msg("宽度请输入数值");
				$(v).find("input[name='width']").focus();
				layer.close(x);
				return null;
			}
			arrWay.push({
				id : id,
				wayName : wayName,
				texture : texture,
				wayUse : wayUse,
				width : width,
				heigth : heigth,
				length : length,
				separateDevice : separateDevice,
				fkProjectid : fkProjectid
			});
		}
		return {
			opt:optWayInfo,
			wayList:arrWay,
			delRoadInfoIds:delRoadInfoIds
		};
	}
	
	function roadInfoSuccess(responseText) {
		if (responseText.data) {
			layer.alert("保存成功！", {
				offset : '20%',
				shade : [ 0.1, '#fff' ]
			}, function() {
				$("#div_way>div").remove();
				materialList=[];//清空数组，重新获取数据，防止添加新数据，显示不出来
				getWayInfoMsg();
				$("#roadInfoForm").find("#modifyBtn").show();
				$("#roadInfoForm").find(".hidbtn").removeClass("showbtn");
				layer.closeAll();
			});
			layer.close(x);


		} else {
			layer.alert('保存失败！');
			layer.close(x);
		}

	}
	
	//初始化下拉框值   material为下拉框需要选中的值
	function initSelect2Material(material,count) {
		var $s2 = $("#div_way select[name='material_"+count+"']");
		if(materialList.length==0){
			$.getJSON("assortInfo/getTextureList", function(data, status) {
				if (status == "success") {
					materialList=data;
					materialInitData($s2,material);
				}
			});
		}else{
			materialInitData($s2,material);
		}
	}
	
	function materialInitData($s2,material){
		$.each(materialList, function(i, v) {
			var html1="";
			if (v != null && v != "") {
				html1 = "<option value=\"" + v + "\">" + v + "</option>";
				$s2.append(html1);
			}
		});
		//材质
		 $s2.select2({
			tags : true
		});
		if (material != "" && material != null) {
			$s2.val(material).trigger("change");
		}
	}
</script>
<style>
.select2-container .select2-selection--single {
	height: 25px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered
	{
	line-height: 25px;
}
</style>
<form class="cmxform" id="roadInfoForm" method="post"
	action="assortInfo/addWayInfo">
	<div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h5 class="panel-title">基本信息</h5>
			</div>
			<div class="panel-body">
				<div>
					<!-- 道路信息-->
					<div id="div_way">
						<p>
							<span class="style_btn">道路信息</span>
							<span class="style_input">
								<a class="btn btn-danger radius a_font addbtn" id="addWay" onclick="addDivWay()"> 添加</a>
						</p>
						
					</div>
				</div>
			</div>
		</div>
		<div style="width:100%;text-align:center; padding-top:20px">
			<div id="btn_div1">
				<button class="btn btn-danger radius my-btn"
					onclick="saveWayInfo(0)" type="button">提交</button>
				<button class="btn btn-danger radius my-btn"
					onclick="saveWayInfo(1)" type="button">保 存</button>
				<a class="btn btn-default radius"
					onClick="resetForms('roadInfoForm');"> 重置 </a> <br />
			</div>
			<div id="btn_div2" style="display:none;">
				<shiro:hasPermission name="permission:edit">
					<button id="modifyBtn" type="button"
						class="btn btn-danger radius my-btn" onclick="saveWayInfo(3)">启用编辑</button>
					<button class="btn btn-danger radius my-btn hidbtn"
						onclick="saveWayInfo(2)" type="button">保存修改</button>
					<a class="btn btn-default radius hidbtn"
						onClick="resetForms('roadInfoForm');">重置</a>
				</shiro:hasPermission>
			</div>
		</div>

	</div>
</form>
<script type="text/javascript">
	var materialList=[];//材质
	var count=0;
	function addDivWay(val) {
		if(count==0){
			$("#ri").find("select[name='material']").attr("name","material_"+count);
		}else{
			$("#ri").find("select[name='material_"+(count-1)+"']").attr("name","material_"+count);
		}
		var node = $("#ri").html();
		var oTest = $("#div_way");
		
		oTest.append(node);
		//添加元素之后，激活selece2插件
		oTest.find("input[name='purpose']").select2({
			tags : true
		});
		if(isEdit=="yes"){
			initSelect2Material(val,count);
		}else{
			initSelect2Material("",count);
		}
		count++;
	}
	
	//存储将要删除的id，传到后台删除
	var delRoadInfoIds = new Array();
	function delDiv2(obj) {
		var id = $(obj).parent().parent().parent().find("input[name='roadid']").val();
		delRoadInfoIds.push(id);
		$(obj).parent().parent().parent().parent().parent().remove();
		layer.msg("点击保存后，将彻底删除该条数据！");
	}
</script>
<!-- div start -->
<div id="ri" style="display:none;">
	<div id="renxing" style="border:1px solid gray;padding:10px;margin:10px 0px;">
		<table cellpadding="10" cellspacing="5" class="mytable">
			<tr>
				<td width="73" class="td-right"><span>道路名称</span><input name="roadid" id="entityId_roadInfoId" type="hidden"></td>
				<td><input name="wayName" value="" /></td>
				<td width="73" class="td-right"><span>材质</span></td>
				<td><select class="js-example-tags" name="material"
					 style="width:160px;">
						<option value="" selected="selected">请选择</option>
				</select></td>
				<td valign="top" align="right">
                	<a href="javascript:void(0)" onclick="delDiv2(this)">
                      <i class="icon-fullscreen"></i>
                  	</a>
	            </td>
			</tr>
			<tr>
				<td width="73" class="td-right"><span>用途</span></td>
				<td><select class="js-example-tags" name="purpose"
					 style="width:160px;">
						<option value="人行">人行</option>
						<option value="车行">车行</option>
						<option value="人车混行">人车混行</option>
				</select></td>
				<td width="73" class="td-right"><span>宽度</span></td>
				<td><input id="" name="width" value="" /> m</td>
			</tr>
			<tr>
				<td width="73" class="td-right"><span>限高</span></td>
				<td><input id="" name="heigth" value="" /> m</td>
				<td width="73" class="td-right"><span>分隔装置</span></td>
				<td><input id="" name="separateDevice" value="" /></td>
			</tr>
			<tr>
				<td width="73" class="td-right"><span>长度</span></td>
				<td><input id="length" name="length" value="" /> m</td>
				<td width="73" class="td-right"></td>
				<td></td>
				
			</tr>
		</table>
	</div>
</div>